import React from 'react'
import { useNavigate, Link } from 'react-router-dom'
import styles from './index.module.css'
import img from '../../assets/mobile.png'
import { Grid, Cell, Button, Dialog } from 'react-vant'
import { getUserInfo } from '../../api/user'
import { getToken, setToken } from '../../utils'
export default class Home extends React.Component {
    state = {
        token: getToken() ? getToken() : 0,
        userInfo: {}
    }
    out() {
        Dialog.confirm({
            title: '退出',
            message: '你确定退出吗',
        })
            .then(() => {
                // on confirm
                setToken('')
                this.setState({
                    token: '',
                    userInfo: ""
                })
            })
            .catch(() => {
                // on cancel
            });
    }
    render() {
        return (<div>
            {this.renderHeader()}
            <Grid columnNum={2}>
                <Grid.Item icon="star-o" text="收藏" />
                <Grid.Item icon="underway-o" text="历史" />
            </Grid>
            <Cell title="消息通知" isLink />
            <Cell title="小智同学" isLink />
            {this.state.token ? <div className={styles.out} onClick={() => { this.out() }}>
                退出登录
            </div> : ""}
        </div>)
    }
    renderHeader() {
        if (this.state.token) {
            return (<div className={styles.header}>
                <div className={styles.top}>
                    <div className={styles.left}>
                        <img src={this.state.userInfo.photo} alt="" />{this.state.userInfo.name}
                    </div>
                    <div className={styles.right}>
                        编辑资料
                    </div>
                </div>
                <div className={styles.bottom}>
                    <div className={styles.item}>
                        <div className={styles.number}>{this.state.userInfo.art_count}</div>
                        <div>头条</div>
                    </div>
                    < Link to={`/user/fans/0/${this.state.userInfo.id}`}>
                        <div className={styles.item}>
                            <div className={styles.number}>{this.state.userInfo.follow_count}</div>
                            <div>关注</div>
                        </div>
                    </ Link>
                    < Link to={`/user/fans/1/${this.state.userInfo.id}`}>
                        <div className={styles.item}>
                            <div className={styles.number}>{this.state.userInfo.fans_count}</div>
                            <div>粉丝</div>
                        </div>
                    </ Link>
                    <div className={styles.item}>
                        <div className={styles.number}>{this.state.userInfo.like_count}</div>
                        <div>获赞</div>
                    </div>
                </div>
            </div>)
        } else {
            return (<div className={styles.header}>
                <Link to="/login">
                    <img src={img} alt="" />
                    <div className={styles.link}>
                        登录/注册
                    </div>
                </Link>
            </div>)
        }

    }
    async  componentDidMount() {
        try {
            if (this.state.token) {
                const res = await getUserInfo()
                console.log(res);
                this.setState({
                    userInfo: res.data.data
                })
            }
        } catch (error) {
        }
    }
}